<script setup lang='ts'>
import { reactive, ref, watch } from "vue";
const count = ref(0)
const name = ref("123")

type IPerson = { name: string, info: { address: string, phone: string}}

const person = reactive<IPerson>({
    name: "张三",
    info: {
        address: "北京昌平",
        phone: "18822259006"
    }
})

 // 侦听器-侦听单个的用法
//  watch(count, (newValue, oldValue) => {
//      console.log(newValue, oldValue)
//  })

// 监听多个的响应式数据-newValue和oldValue是数组，顺序按照传入顺序排列
// watch([count, name], (newValue, oldValue) => {
//     console.log("新值" + newValue, "旧值" + oldValue)
//  })

// Watch监听响应式对象中属性的变化
watch(() => person.name, (newValue, oldValue) => {
    console.log("新值" + newValue, "旧值" + oldValue)
}, {
    deep: true,
    immediate: true
})
</script>
       
<template>
    <h1>Watch最简单用法</h1>
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
    <input type="text" v-model="name">
    <h1>Watch监听属性的变化</h1>
    <ul>
        <li v-for="(value, key, index) in person" :key="index">
            {{ value }}
        </li>
    </ul>
    <button @click="person.name = '李四'">修改名字</button>
    <button @click="person.info = { address: '123', phone: 'scd' }">修改信息</button>
</template>
       
<style scoped>
       
</style>